<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设置</title>
  <!-- 重置样式，使得各浏览器样式更一致 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <!-- vant样式 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="../style/common.css" />
</head>

<body>
  <div style="padding-top: 16px" id="Setting">
    <van-cell-group inset>
      <van-field label="导出" title-class="cell-title" readonly>
        <template #button>
          <van-button size="small" @click="handleExportMsg">数据导出</van-button>
        </template>
      </van-field>
      <van-field label="保存" title-class="cell-title" readonly>
        <template #button>
          <van-button size="small" @click="handleSaveMsg" disabled>数据保存</van-button>
        </template>
      </van-field>
      <van-field label="清理" title-class="cell-title" readonly>
        <template #button>
          <van-button size="small" @click="handleClearCatch">清除缓存</van-button>
        </template>
      </van-field>
      <van-field label="方向" title-class="cell-title" readonly>
        <template #button>
          <van-button size="small" @click="handleRemoveDirection" :disabled="headerList.length <= 1">删除方向</van-button>
        </template>
      </van-field>
    </van-cell-group>

    <!-- 删除方向 -->
    <van-popup v-model:show="showRemovePicker" destroy-on-close round position="bottom">
      <van-picker :model-value="pickerDirectionValue" :columns="headerList.slice(1)"
        :columns-field-names="{text: 'value', value: 'key'}" title="删除方向" @cancel="showRemovePicker = false"
        @confirm="handleSureRemove" />
    </van-popup>
  </div>
</body>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script src="../js/methods.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=e16b1f7b2145b064b8658ebbe7b3ad62"></script>
<script src="../config.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } = Vue
  const app = Vue.createApp({
    setup() {
      // 顶部选择器
      const headerList = ref([baseHeader])

      // 基础信息
      const baseMsg = ref(JSON.parse(JSON.stringify(base)))

      // 方向信息的全量
      const directionMsg = ref([])

      const activeTab = ref(0)

      // local获取
      const getLocalMsg = () => {
        baseMsg.value = getLocal('baseMsg') || JSON.parse(JSON.stringify(base))
        directionMsg.value = getLocal('directionMsg') || []
        headerList.value = getLocal('headerList') || [baseHeader]
        setTimeout(() => {
          activeTab.value = getLocal('activeTab')
        }, 100)
      }

      // 内容导出
      const handleExportMsg = () => {
        const params = {
          baseMsg: baseMsg.value,
          directionMsg: directionMsg.value,
          headerList: headerList.value
        }
        const textarea = document.createElement('textarea');
        textarea.setAttribute('readonly', 'readonly');
        textarea.value = JSON.stringify(params)
        document.body.appendChild(textarea);
        textarea.select();
        if (document.execCommand) {
          document.execCommand('copy');
          vant.showToast('内容复制成功，可将内容粘贴至微信');
        }
        document.body.removeChild(textarea);
      }

      const scaleTable = computed(() => {
        const scale = parseFloat(window.innerWidth) / 800 - 0.01
        return `transform: scale(${scale}); transform-origin: top left; overflow: auto`
      })

      // 数据保存
      const handleSaveMsg = () => {
        const params = {
          baseMsg: baseMsg.value,
          directionMsg: directionMsg.value,
          headerList: headerList.value
        }
        console.log('params', params);
        fetch(`${apiUrl}/saveData`, {
          method: 'POST',
          body: JSON.stringify(params),
          headers: {
            'content-type': 'application/json'
          }
        })
      }

      // 清除缓存
      const handleClearCatch = () => {
        vant.showConfirmDialog({
          title: '提示',
          message: '确定清除当前的所有缓存信息吗？清除后不可恢复',
        }).then(() => {
          clearLocal()
          vant.showToast('清除成功')
          getLocalMsg()
        }).catch(() => {

        })
      }

      const pickerDirectionValue = ref()

      const showRemovePicker = ref(false)
      // 删除方向信息
      const handleRemoveDirection = () => {
        showRemovePicker.value = true
      }

      // 删除指定方向
      const handleSureRemove = (data) => {
        if (data.selectedOptions.length) {
          vant.showConfirmDialog({
            title: '提示',
            message: `确定删除方向${data.selectedOptions[0].value}吗?删除后无法恢复`,
          }).then(() => {
            const index = data.selectedIndexes[0]
            headerList.value.splice(index + 1, 1)
            directionMsg.value.splice(index - 1, 1)
            showRemovePicker.value = false
            vant.showToast('删除成功')
            if (activeTab.value > directionMsg.value.length) {
              activeTab.value = directionMsg.value.length
            }
            setLocalMsg()
          }).catch(() => {

          })
        }
      }

      // local存储
      const setLocalMsg = () => {
        setLocal('baseMsg', baseMsg.value)
        setLocal('directionMsg', directionMsg.value)
        setLocal('headerList', headerList.value)
        setLocal('activeTab', activeTab.value)
      }

      onMounted(async () => {
        getLocalMsg()
      })

      return {
        // 基础定义的内容导出
        headerList, showRemovePicker, pickerDirectionValue,
        // computed定义的计算属性
        scaleTable,
        // 方法导出
        handleExportMsg, handleSaveMsg, handleClearCatch, handleRemoveDirection, handleSureRemove
      }
    }
  })
  app.use(vant);
  app.use(vant.Lazyload);
  app.mount("#Setting");
</script>

</html>